<template>
  <view>
    <u-swiper v-if="list.length>0" :list="list" mode="rect" indicator-pos="bottomRight"></u-swiper>
	  <image :src="url" mode=""></image>
  </view>
</template>

<script>
import {getAllList} from '@/api/common'
  export default {
    data() {
		return {
			url:'',
			list: [
			],
		}
    },
    onLoad(options){
      this.pageReload()
    },
    methods: {
      // async getCatImage(num){
        // const url =  'https://api.thecatapi.com/v1/images/search'
        // getAllList(url).then((result) => {
        //   console.log(result.data);
		    //   const data = result.data
        //   this.list[num] = {image:data[0].url,title:`${num}`}
        // }).catch((err) => {
        //   console.log(err);
        // });
        // const res = await getAllList(url)
        // const data = res.data[0]
        // console.log(num,data);
          // this.list[num] = {image:data.url,title:`${num}`}
          // console.log(this.list)
      // },
      getCatImage(num){
        const url =  'https://api.thecatapi.com/v1/images/search'
        getAllList(url).then((result) => {
          console.log(result.data);
		      const data = result.data
          this.list[num] = {image:data[0].url,title:`${num}`}
        }).catch((err) => {
          console.log(err);
        });
      },
      pageReload(){
        const url =  'https://api.thecatapi.com/v1/images/search'
        getAllList(url).then((result) => {
          console.log(result.data);
          const data = result.data
          this.url = data[0].url
          this.getCatImage(0)
          this.getCatImage(1)
          this.getCatImage(2)
          // console.log(data[0])
              // this.list[0] = {image:data[0].url,title:'1'}
              // this.list[1] = {image:data[0].url,title:'2'}
              // this.list[2] = {image:data[0].url,title:'3'}
          // console.log(this.list)

        }).catch((err) => {
          console.log(err);
        });
      }
    },
  }
</script>

<style>

</style>